<template>
    <div>
        <el-page-header>
            <template #content>
                <div class="flex items-center">
                    <span class="text-large font-600 mr-3"> RG测试 </span>
                    <el-tag>离线</el-tag>
                    <router-link to="/basic" class="nav-item" :class="{ active: isActive('/basic') }">基本</router-link>
                    <router-link to="/config" class="nav-item" :class="{ active: isActive('/config') }">配置</router-link>
                    <router-link to="/schedule" class="nav-item" :class="{ active: isActive('/schedule') }">定时</router-link>
                </div>
            </template>
        </el-page-header>
    </div>
</template>

<script setup lang="ts">
import { useRoute } from 'vue-router';

const route = useRoute();
const goBack = () => {
    console.log('go back')
}
const isActive = (path) => {
    return route.path === path;
};
</script>

<style scoped>
.nav-item:last-child {
  margin-right: 0;
}
.nav-item {
  font-size: 18px;
  font-weight: 600;
  margin-left: 20px;
  color: gray;
  text-decoration: none;
}

.nav-item.active {
  color: black;
}
</style>